<template>
	<view class="container">
		<view class="banner">
			<view class="header-bar">
				<view class="notice">
					<tui-icon name="notice" size="20"></tui-icon>
				</view>
				<view class="avatar-block">
					<image class="avatar" @click="openUserInfo" src="../../static/login/uni-fab-login/weixin.png"></image>
				</view>
			</view>
			<view class="board"></view>
		</view>
		<!-- <view class="tabs-container">
			<tui-tab :tabs="tabList" scroll @change="tabChange"></tui-tab>
		</view> -->

		<compScorll class="content-scroll">
			<view class="box plain">
				<view class="box--body">
					<image src="../../static/test.jpg" mode="aspectFill"></image>
				</view>
				<view class="title">神秘大地组局神秘大地组局神秘大地组局神秘大地组局~</view>
				<view class="tags">
					<view class="tag">
						<tui-tag plain>桌面游戏</tui-tag>
					</view>
					<view class="tag">
						<tui-tag plain>剧本</tui-tag>
					</view>
				</view>
			</view>
			<!-- <view class="box plain">
				<view class="box--body">
					<image src="../../static/test.jpg" mode="aspectFill"></image>
				</view>
				<view class="title">神秘大地组局神秘大地组局神秘大地组局神秘大地组局~</view>
				<view class="tags">
					<view class="tag">
						<tui-tag plain>桌面游戏</tui-tag>
					</view>
					<view class="tag">
						<tui-tag plain>剧本</tui-tag>
					</view>
				</view>
			</view>
			<view class="box plain">
				<view class="box--body">
					<image src="../../static/test.jpg" mode="aspectFill"></image>
				</view>
				<view class="title">神秘大地组局神秘大地组局神秘大地组局神秘大地组局~</view>
				<view class="tags">
					<view class="tag">
						<tui-tag plain>桌面游戏</tui-tag>
					</view>
					<view class="tag">
						<tui-tag plain>剧本</tui-tag>
					</view>
				</view>
			</view> -->
			
			<view class="blank">
				<!-- 加载中... -->
				已经到底了～
			</view>
		</compScorll>
		<!-- 
		<van-button type="primary">主要按钮</van-button>
		<van-share-sheet
		  :show="showShare"
		  title="立即分享给好友"
		/> -->

		<tui-fab v-if="showFab" @click="openDrawer" :btnList="btnList" :width="80" :height="80" :right="50" :bottom="140"></tui-fab>
		
		<tui-drawer mode="bottom" :visible="drawerVisible" @close="closeDrawer">
			<view class="drawer-container">
				heloword
			</view>
		</tui-drawer>
		
		<tui-drawer mode="right" :visible="userVisible" @close="closeUserDrawer">
			<view class="right-container">
				
			</view>
		</tui-drawer>
	</view>
</template>

<script>
	import compScorll from '@/components/scroll/index.vue'

	export default {
		components: {
			compScorll,
		},
		data() {
			return {
				tab: {
					current: 0,
					list: [],
				},
				btnList: [],
				showFab: true,
				drawerVisible: false,
				userVisible: false,
			}
		},
		watch: {
			drawerVisible: {
				handler(val) {
					this.showFab = !val
					val ? uni.hideTabBar() : uni.showTabBar()
				},
				immediate: true
			},
		},
		computed: {
			tabList() {
				return this.tab.list.map((item) => item.name)
			}
		},
		mounted() {
			this.tab.list = [{
					name: '关注',
				},
				{
					name: '最新',
				},
				{
					name: '推荐',
				},
			]
			// 后续动态获取类型
			this.showShare = true

			// this.getActivityList()
		},
		methods: {
			tabChange() {
				console.log(1)
			},
			onReachBottom() {
				console.log(222)
			},
			async getActivityList() {
				const res = await uniCloud.importObject('activity').getList()
				console.log(res)
			},
			closeDrawer() {
				this.drawerVisible = false
			},
			closeUserDrawer() {
				this.userVisible = false
			},
			openDrawer() {
				this.drawerVisible = true
			},
			openUserInfo() {
				this.userVisible = true
			},
		}
	}
</script>

<style lang="less" scoped>
	.container {
		margin: 0 auto;
		height: calc(100vh - 100upx);
		display: flex;
		flex-direction: column;

		.content-scroll {
			padding-top: 20upx;
			flex: 1;
			overflow: auto;
		}

		.box {
			margin: 0 24upx;
			box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(0, 0, 0, 0), 0 2upx 6upx rgba(0, 0, 0, 0.1), 0 2upx 4upx rgba(0, 0, 0, 0.1);
			& + .box {
				margin-top: 30upx;
			}

			&.plain {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.title {
					padding: 12upx;
					font-size: 36upx;
					text-align: justify;
				}
				.tags {
					padding: 12upx;
				}
			}

			.box--body {
				font-size: 0;
				image {
					width: 100%;
					height: 220upx;
				}
			}
		}
		
		.blank {
			height: 120upx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999;
			font-size: 28upx;
		}
		
		.tags {
			// padding-left: 16upx;
			display: flex;
			.tag {
				& + .tag {
					margin-left: 16upx;
				}
			}
		}
		
		.drawer-container {
			height: 200upx;
		}
		
		.right-container {
			width: 80vw;
		}

		.banner {
			// background: linear-gradient(to bottom, rgb(71, 131, 249), #fff);
			background: rgb(151, 183, 247);
			width: 100%;
			// height: 380upx;
			padding: 36upx 0;
			padding-bottom: 18upx;

			.header-bar {
				display: flex;
				justify-content: space-between;
				margin: 0 18upx;

				.avatar-block {
					width: 70upx;
					height: 70upx;
					border-radius: 50%;
					background: #fff;
					display: flex;
					justify-content: center;
				}

				.avatar {
					width: 70upx;
					height: 70upx;
					border-radius: 50%;
				}

				.notice {
					width: 70upx;
					height: 70upx;
					background: #fff;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.board {
				margin: 0 18upx;
				margin-top: 20upx;
				height: 172upx;
				padding: 6upx 10upx;
				border-radius: 16upx;
				background: #fff;
			}
		}
	}
</style>